<script setup>
const orderTypes = [
    { type: 1, text: '待付款', icon: 'icon-currency' },
    { type: 2, text: '待发货', icon: 'icon-gift' },
    { type: 3, text: '待收货', icon: 'icon-check' },
    { type: 4, text: '待评价', icon: 'icon-comment' }
];
/**
 * 统一跳转接口,拦截未登录路由
 * navigator标签现在默认没有转场动画，所以用view
 */
let navTo = (url) => {
    // if (!this.hasLogin) {
    //     url = '/pages/public/login';
    // }
    uni.navigateTo({
        url
    });
};
</script>

<template>
    <scroll-view class="viewport" scroll-y enable-back-to-top>
        <!-- 个人资料 -->
        <view class="profile">
            <!-- 已登录 -->
            <view class="overview" v-if="true">
                <navigator url="/pages/profile/profile" hover-class="none">
                    <image class="avatar" mode="aspectFill" src="https://p1.itc.cn/q_70/images03/20221117/3a6dca4411854e0d9f24aae7201e0b9b.jpeg"></image>
                </navigator>
                <view class="meta">
                    <view class="nickname">五右前臂</view>
                    <navigator class="extra" url="/pages/profile/profile" hover-class="none">
                        <text class="update">更新头像</text>
                    </navigator>
                </view>
            </view>
            <!-- 未登录 -->
            <view class="overview" v-else>
                <navigator url="/pages/login/login" hover-class="none">
                    <image class="avatar gray" mode="aspectFill" src="../../static/logo.png"></image>
                </navigator>
                <view class="meta">
                    <navigator url="/pages/login/login" hover-class="none" class="nickname">未登录</navigator>
                    <view class="extra">
                        <text class="tips">点击登录账号</text>
                    </view>
                </view>
            </view>
            <navigator class="settings" url="" hover-class="none">设置</navigator>
        </view>
        <!-- 我的订单 -->
        <view class="orders">
            <view class="title">
                <navigator class="navigator" url="/pages/order/order" hover-class="none">
                    查看全部订单
                    <text class="icon-right"></text>
                </navigator>
            </view>
            <view class="section">
                <!-- 订单 -->
                <navigator v-for="item in orderTypes" :key="item.type" :class="item.icon" :url="`/pagesOrder/list/list?type=${item.type}`" class="navigator" hover-class="none">
                    {{ item.text }}
                </navigator>
                <!-- 客服 -->
                <button class="contact icon-handset" open-type="contact">售后服务</button>
            </view>
        </view>
        <!-- 浏览历史 -->
        <view class="history-section">
            <!--    <view class="sec-header">
                <text class="yticon icon-lishijilu"></text>
                <text>浏览历史</text>
            </view> -->
            <view>
                <!-- <ListCellView icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></ListCellView> -->
                <ListCellView icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('/pages/address/address')"></ListCellView>
                <ListCellView icon="icon-share" iconColor="#9789f7" title="分享" tips="邀请好友赢10万大礼"></ListCellView>
                <ListCellView icon="icon-pinglun-copy" iconColor="#ee883b" title="晒单" tips="晒单抢红包"></ListCellView>
                <ListCellView icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的收藏"></ListCellView>
                <ListCellView icon="icon-shezhi1" iconColor="#e07472" title="设置" border="" @eventClick="navTo('/pages/me/profile')"></ListCellView>
            </view>
        </view>
    </scroll-view>
</template>

<style lang="scss" scoped>
page {
    height: 100%;
    overflow: hidden;
    background-color: #f7f7f8;
}
.viewport {
    height: 100%;
    background-repeat: no-repeat;
    background-image: url('/static/user-bg.jpg');
    // background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
    background-size: 100% auto;
}
// 用户信息
.profile {
    margin-top: 20rpx;
    position: relative;
    .overview {
        display: flex;
        height: 120rpx;
        padding: 0 36rpx;
        color: #fff;
    }
    .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #eee;
    }
    .gray {
        filter: grayscale(100%);
    }
    .meta {
        display: flew;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        line-height: 30rpx;
        padding: 16rpx 0;
        margin-left: 20rpx;
    }
    .nickname {
        max-width: 350rpx;
        margin-bottom: 16rpx;
        font-size: 30rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .extra {
        display: flex;
        font-size: 20rpx;
    }
    .tips {
        font-size: 22rpx;
    }
    .update {
        padding: 30rpx 10rpx 1rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-right: 10rpx;
        border-radius: 30rpx;
    }
    .settings {
        position: absolute;
        bottom: 0;
        right: 40rpx;
        font-size: 30rpx;
        color: #fff;
    }
}
// 我的订单
.orders {
    position: relative;
    z-index: 99;
    padding: 30rpx;
    margin: 50rpx 20rpx 0;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
    .title {
        height: 40rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #1e1e1e;
        .navigator {
            font-size: 24rpx;
            color: #939393;
            float: right;
        }
    }
    .section {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .navigator,
        .contact {
            text-align: center;
            font-size: 24rpx;
            color: #333;
            &::before {
                display: block;
                font-size: 60rpx;
                color: #ff9545;
            }
        }
        .contact {
            padding: 0;
            margin: 0;
            border: 0;
            background-color: transparent;
            line-height: inherit;
        }
    }
}
// 流浪历史
.history-section {
    display: flex;
    background-color: red;
    flex-direction: column;
    padding: 30rpx 0 0;
    margin-top: 20rpx;
    background: #fff;
    border-radius: 10rpx;
    .sec-header {
        display: flex;
        align-items: center;
        font-size: $font-base;
        color: $font-color-dark;
        line-height: 40rpx;
        margin-left: 30rpx;
        .yticon {
            font-size: 44rpx;
            color: #5eba8f;
            margin-right: 16rpx;
            line-height: 40rpx;
        }
    }
    .h-list {
        white-space: nowrap;
        padding: 30rpx 30rpx 0;
        image {
            display: inline-block;
            width: 160rpx;
            height: 160rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
        }
    }
}
</style>
